<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0rc1.min.css" />
<script src="jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0rc1.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.js" type="text/javascript"></script>
<title>I am Petdo!</title>
</head>
<body>

<div data-role="page" id="home"> 
<script type="text/javascript">
$(document).ready(function () {
	$('#item_list').rssfeed('http://www.iampetdo.com/rss.xml', {limit: 200});
});
</script>
<div data-role="header">
   <h1>I am Petdo!</h1>
</div>
<div data-role="content">
  <ul id="item_list" data-role="listview" data-theme="c" data-dividertheme="d" data-counttheme="e"></ul>
</div>
</div> 

<script type="text/javascript">
   var lenght = localStorage.length;
     html='';
   for (i=0;i < (lenght); i++) {
 
      html+='<div data-role="page" id="pet' +i + '">';
      
      var title_items = localStorage.getItem("petdo-title-"+i);
      var body_items_0 = localStorage.getItem("petdo-body-"+i+"_0");
    var body_items_1= localStorage.getItem("petdo-body-"+i+"_1");
var body_items_2 = localStorage.getItem("petdo-body-"+i+"_2");
var body_items_3 = localStorage.getItem("petdo-body-"+i+"_3");

      html+='<div data-role="header">' + '<h1>'  + title_items + '</h1>';
      html+='</div>';
      html+='<div data-role="content">' + body_items_0 + '<br>' + body_items_1 + '<br>' + body_items_2 + '<br>' + body_items_3 + '</div>';
      html+='</div>';
   }
   document.write(html);
</script>

</body>
</html>
